<template>
    <div class="registration">
        <div class="leftcon">
               <el-button size="small"   type="primary" @click="getsninfo_fn">查询注册码</el-button>
               <div style="margin-top:30px" class="teshu">机器码：{{getsninfoObj.HWID}}</div>
               <div style="margin-top:10px">注册码：{{getsninfoObj.sn}}</div>
               <div style="margin-top:10px">客户名称：{{getsninfoObj.customer}}</div>
        </div>
        <div class="rightcon">
            <div class="right-item">
                <span class="leftname">注册码：</span> <el-input v-model="musn"  placeholder="请输入注册码"></el-input>
             
            </div>
            <div class="right-item">
                   <span class="leftname">客户名称：</span> <el-input v-model="customer"  placeholder="请输入客户名称"></el-input>
            </div>
            <div class="determine">
                  <el-button size="small"  class="last-el-button" type="primary" @click="savesninfo_fn">确定注册</el-button>
            </div>
        </div>

    </div>
</template>

<script>
// import CircularJSON from 'circular-json'
import {getSNinfo,saveSNinfo} from "../../api/Interface";
export default {

    name: 'NewdemoIndexdo',

    data() {
        return {
            baseURL:"",
            getsninfoObj:{ sn:"", customer:"",HWID:""},
            musn:"",
            customer:"",
        };
    },

    mounted() {
        this.baseURL = DWSystemSetting.newApiRul
        this.getsninfo_fn()
    },

    methods: {
        //查询注册码
        getsninfo_fn(){
            getSNinfo().then(res => {
                 if(res.code == 0){
                    if(res.customer){
                          this.getsninfoObj = res
                    }else {
                         this.getsninfoObj = {
                             sn:"未注册",
                             customer:"未注册",
                             HWID:res.HWID
                         }
                    }
                }else {
                    res.msg ? this.$message.error(res.msg) : this.$message.error('查询失败');
                }
            })
            
        },
        //确定注册码
        savesninfo_fn(){
            if(this.musn == ''){
                 this.$message({showClose: true,message: '注册码不能为空',type: 'warning'});
                 return
            }
           if(this.customer == ''){
                 this.$message({showClose: true,message: '客户名称不能为空',type: 'warning'});
                 return
            }
            // // UTF-8 编码的字符串
            // var utf8String = this.musn;

            // // 将 UTF-8 转换为 GB2312
            // var utf8Array = new TextEncoder().encode(utf8String);
            // var gb2312String = new TextDecoder('gb2312').decode(utf8Array);

            // console.log(gb2312String);
            var d = {
                 'sn':this.musn,
                 'customer':this.customer,
            }
            saveSNinfo(d).then(res => {
               if(res.code == 0){
                    this.getsninfo_fn()
                    this.$message({showClose: true,message: '注册成功',type: 'success'});
                }else {
                    res.msg ? this.$message.error(res.msg) : this.$message.error('注册失败');
                }
            })
           

        },
       
    },
};
</script>

<style lang="scss" scoped>
.registration {
     background-color: #fff !important;
     display: flex;
     .leftcon {
         width: 50%;
         height: 100%;
         padding: 20px;
         box-sizing: border-box;
         border-right: 1px solid #e6e6e6;
         .teshu {
             user-select: text;
         }
     }
     .rightcon {
          width: 50%;
         height: 100%;
            padding: 20px;
         box-sizing: border-box;
         .right-item {
            width: 80%;
             display: flex;
             align-items: center;
             margin-bottom: 20px;
             .leftname {
                width: 90px;
                text-align: right;
             }
         }
         .determine {
             width: 80%;
             display: flex;
             justify-content: flex-end;
         }
     }
}
</style>